<!--
@Description:工单流水记录
@Author:zqy
@Date:2022-05-24 16:11:57
@Last Modified by:zqy
@Last Modified time:2022-05-24 16:11:57
-->
<template>
  <div :class="$style.flowOrder">
    <p :class="$style.item" style="width:200px;flex:0 0 200px !important">{{ flow.deptName ? flow.deptName : '--' }}</p>
    <p :class="$style.item" style="width:140px;flex:0 0 140px !important">{{ flow.handlerName ? `${flow.handlerName}(${flow.handler})${flow.handlerPlatformNo?' - ' + flow.handlerPlatformNo:''}` : '--' }}</p>
    <p :class="[$style.item, $style.content]" title="双击复制" style="flex:1 1 auto !important" @dblclick="copyHandle">{{ content }}</p>
    <!-- <el-tooltip effect="dark" :content="content" placement="top">
        <div :class="$style.content">{{ content }}</div>
      </el-tooltip>
    </p> -->
    <p :class="$style.item" style="width:140px;flex:0 0 140px !important">{{ flow.createTime ? flow.createTime : '--' }}</p>
  </div>
</template>
<script>
export default {
  name: 'FlowOrder',
  props: {
    flow: {
      type: [Array, Object],
      default: () => []
    },
    prefix: {
      type: String,
      default: ''
    }
  },
  computed: {
    computedWidth() {
      if (this.flow instanceof Array) {
        return `0 0 ${100 / this.flow.length}%`
      } else {
        return `0 0 ${100 / Object.keys(this.flow).length}%`
      }
    },
    content() {
      let prefix = ''
      if (this.prefix) {
        prefix = `${this.prefix}：`
      }
      let content = '--'
      if (this.flow.content) {
        content = this.flow.content
      }
      return prefix + content
    }
  },
  methods: {
    copyHandle(e) {
      const target = e.target
      this.$copyText(target.innerText)
    }
  }
}
</script>
<style lang='scss' module>
@import "@/styles/mixin.scss";
.flowOrder{
    // max-width: 800px;
    padding: 5px 0;
    @include flex($justify:space-around);
    & .item:not(:last-child){
        padding-right: 10px;
    }
    & p{
        display: inline-block;
        width: 20%;
        line-height: 1.5;
        // padding-bottom: 10px;
        margin: 0;
        flex: 0 0 auto;
        vertical-align: text-top;
    }
    & .content{
      // max-height: calc(50 * 1.2em);
      // line-height: 1.2em;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-line-clamp: 50;
      // -webkit-box-orient: vertical;
      cursor: pointer;
    }
}
</style>
